<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽卡样式</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #0f0f0f;
        overflow: hidden;
    }
    .containter{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .containter .card{
        position: absolute; 
        width: 240px;
        height: 320px;
        background-color: #2214a0;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(0,0,0,0);
        font-size: 8em;
        font-weight: 700;
        border: 10px solid rgb(9, 68, 194);
        transition: .5s;
        transform-origin: 50% 100%;
        filter: hue-rotate(calc(var(--i) * 45deg));
        box-shadow: 0 15px 50px rgba(0,0,0,.5);
    }
    .containter:hover .card{
        transform: rotate(calc(var(--i) * 5deg))
                    translate(calc(var(--i) * 120px),-60px); /*打开角度 及向上50px*/
        box-shadow: 0 15px 50px rgba(0,0,0,.5);
        color: rgba(0,0,0,0.25);
        cursor: pointer;
    }
    .containter:active .card:not(:active){
        background-color: #242323;
    }
    .containter .card:active{
        translate: calc(var(--i) * 20px) -50px; /*打开角度 及向上50px*/
        z-index: 999;
    }
    




</style>
<body>
    <div class="containter">
        <div class="card" style="--i:-4">1</div>
        <div class="card" style="--i:-3">2</div>
        <div class="card" style="--i:-2">3</div>
        <div class="card" style="--i:-1">4</div>
        <div class="card" style="--i:0">5</div>
        <div class="card" style="--i:1">6</div>
        <div class="card" style="--i:2">7</div>
        <div class="card" style="--i:3">8</div>
        <div class="card" style="--i:4">9</div>
    </div>
</body>
</html>